import { Modal, Form, Input, Button, Table, Popconfirm, Space, Select, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useState,useEffect } from 'react';
import './Resource_management.scss';
import Add from './Add';
import http from '../../utils/http';
const { Option } = Select;

const Resource_management = () => {
  const [form] = Form.useForm();
  const [searchKey, setKey] = useState({});
  const [isshowAdd, setAdd] = useState(false);
  const [isEditlVisible, setEdit] = useState(false);
  const [selectedData, setSelected] = useState([]);
  const [data,setData]=useState([])
  const search = () => {
    console.log(searchKey)
  }
  const toTimes = (value) => {
    if (value) {
        let date = new Date(value)
        let y = date.getFullYear()  //获取年份
        let m = date.getMonth() + 1  //获取月份
        m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
        let d = date.getDate()  //获取日期
        d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
        return y + "-" + m + "-" + d
    }
    else {
        return null
    }
}
  useEffect(()=>{
    http({
      url: '/resinfomanage/resInfoManage',
      // method: 'post'
  }).then((res) => {
      console.log(res)
      if (res.code === 200) {
        
          if (res.data.records) {
            let arr = res.data.records.map((v, i) => {
              return {
                  key: v.reId,
                  reName: v.reName,
                  reType: v.reType == 1 ? '已删' : '正常',
                  reNode: v.reNode == 0 ? '综合应用层' : v.reNode == 1 ? '一级应用层':'二级应用层',
                  reUrl: v.reUrl,
                  reSorrting: v.reSorrting,
                  reCreatetime: toTimes(v.reCreatetime),
                  reUpdatetime: toTimes(v.reUpdatetime)
              }
          })
          console.log(arr)
          setData(arr);
          }
      }
  })
  },[])
  const resize = () => {
    setKey({});
    form.resetFields();
  }
  const isSelect = () => {
    if (selectedData.length > 0) {
      setEdit(true);
    } else {
      message.warning('还未选择删除项');
    }
  }
  const batchDel = () => {
    console.log(selectedData)
  }
  const openEditBox = (record) => {
    console.log(record)
  }
  const confirm = (record) => {
    console.log(record)
    // http({
    //     url:'/admin/deladmin',
    //     method:'post',
    //     data:{
    //         id:b.id
    //     }
    // }).then((res)=>{
    //     console.log(res);
    // })
  }
  const columns = [
    {
      title: '资源名称',
      dataIndex: 'reName',
    },
    {
      title: '资源类型',
      dataIndex: 'reType',
    },
    {
      title: '上级节点',
      dataIndex: 'reNode',
    },
    {
      title: '资源url',
      dataIndex: 'reUrl',
    },
    {
      title: '资源排序',
      dataIndex: 'reSorrting',
    },
    {
      title: '创建时间',
      dataIndex: 'reCreatetime',
    },
    {
      title: '更新时间',
      dataIndex: 'reUpdatetime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => (
        <Space size="middle">
          <a href="#" onClick={() => { openEditBox(record) }}>修改</a>
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => { confirm(record) }}
            okText="Yes"
            cancelText="No"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const projectManagement = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelected(selectedRows)
    },
    getCheckboxProps: (record) => ({
      name: record.name,
    }),
  };
  const handleProType = (value) => {
    let obj = { ...searchKey };
    obj.resourceType = value;
    setKey(obj)
  }
  return <div className='resourceManagement'>
    <Modal visible={isEditlVisible} onOk={batchDel} onCancel={() => { setEdit(false) }} width={250} cancelText='取消' okText='确定' style={{ top: '40%' }}>
      <div><ExclamationCircleOutlined style={{ color: 'rgb(255,153,0)' }} /><span>您确认删除所选吗？</span></div>
    </Modal>
    <Add isshowAdd={isshowAdd} setAdd={setAdd} />
    <Form form={form} name="horizontal_login" layout="inline" className='title'>
      <div className='kuai'>
        <span></span>
        <span>资源信息管理</span>
      </div>
      <Form.Item className='btn'>
        <div>
          <Button className='cha'
            type="primary"
            onClick={() => { setAdd(true) }}>新增</Button>
          <Button className='resize' onClick={isSelect} type="primary">批量删除</Button>
        </div>
      </Form.Item>
    </Form>
    <div className='biao'>
      <Form form={form} name="horizontal_login" layout="inline" className='Role'>
        <Form.Item
          name="resourceName"
          label='资源名称'
        >
          <Input value={searchKey.resourceName} placeholder='请输入资源名称' onChange={(e) => {
            let obj = { ...searchKey };
            obj.resourceName = e.target.value;
            setKey(obj)
          }} />
        </Form.Item>
        <Form.Item
          name="resourceType"
          label='资源类型'
        >
          <Select placeholder="请选择" style={{ width: 200 }} onChange={handleProType}>
            <Option value="子系统">子系统</Option>
            <Option value="功能点">功能点</Option>
            <Option value="虚拟节点">虚拟节点</Option>
          </Select>
        </Form.Item>
        <Form.Item className='btn'>
          <div>
            <Button className='cha'
              type="primary"
              onClick={search}>查询</Button>
            <Button className='resize' onClick={resize} type="primary">重置</Button>
          </div>

        </Form.Item>
      </Form>
      <Table className='table1'
        rowSelection={{
          ...projectManagement,
        }}
        columns={columns}
        dataSource={data}
      />
    </div>
  </div>
};

export default Resource_management;
